<template>
  <view style=" border-bottom: 1px solid #f3ecec;padding:0.8rem 0 0.8rem 0.8rem;"  >
    <van-swipe-cell right-width="55"  >
      <view class="numberWords" @click.capture ="goWordList(item)"  >
        <image :src="data.wordBookCover" mode=""></image>
        <view>
          <p>{{data.wordBookName}}</p>
          <p>总共{{data.totalWords}}个单词</p>
        </view>
      </view>
      <view slot="right" class="deleteBtn" @click.capture="deleteBook(data.id)">删除</view>
    </van-swipe-cell>
    <van-dialog id="van-dialog" />
  </view>
  <!--
  id:单词本id
  wordBookName              //单词本名字
  wordBookCover             //单词本封面
  totalWords                //单词总数
  learnedToday              //今日已学
  cumulativeLearningDays    //累计学习天数
  collection                //是否被收藏  1:收藏  0:未收藏  默认为0
  dept_id                   //外键约束 -->
</template>

<script>
  import Dialog from '@/wxcomponents/vant/dialog/dialog';
  export default {
    name: "WordBook",
    props: {
      data: Object
    },
    data() {
      return {

      };
    },
    methods: {
      deleteBook(id) {
        let data = {
          id: id
        }
        Dialog.confirm({
          context: this,
          title: '确定要删除吗？',
        }).then(() => {

          uni.$myRequest('/home/wordBook/deleteWordBook', 'GET', data).then((res) => {
            console.log(res)
            if (res.data.status === 201) return uni.showToast({
              title: '单词本删除失败',
              icon: "error"
            })
            this.$parent.getwordBook()
          })
        }).catch(() => {
          // on cancel
        });
      },
      goWordList(){
        this.$emit("ToChange")
      }
    },

  }
</script>

<style lang="scss">
  .goods-card {
    margin: 0;
    background-color: red;
  }

  .delete-button {
    height: 100%;
  }

  .deleteBtn {
    display: inline-block;
    width: 55px;
    height: 100%;
    font-size: 15px;
    line-height: 170rpx;
    color: #fff;
    text-align: center;
    background-color: #f44;
  }

  image {

    display: block;
    border-radius: 10%;
    height: 180rpx;
    width: 180rpx;
  }

  .numberWords {
    display: flex;

    image {
      border: 1px solid #e3e3e3;
      box-shadow: 0 0 10px 1px #dbe0e0;
    }

    p:nth-child(1) {
      margin: 10rpx 0 0 10rpx;
      font-weight: 700;
      font-size: 18px;
    }

    p:nth-child(2) {
      margin: 50rpx 0 0 10rpx;
      font-size: 12px;
      color: #9e9d9d;
    }
  }
</style>
